<template>
	<view class="apply">
		<view class="white-bg">
			<view class="flex-box item-box">
				<view class="item-text">
					医院名称
				</view>
				<input type="text" v-model="info.title" class="box-1  text-right" placeholder="请输入医院名称">
			</view>
		</view>
		<view class="white-bg">
			<view class="flex-box item-title">
				医院照片
				<text class="title-tips">（每张图片大小不可超过4M,最多上传4张） </text>
			</view>
			<view class="img-box flex-box">
				<view class="upload" v-if="imgBox.imgs.length<4" @click="chooseImage('imgs','more')">
					<image src="@/static/img/up-img.png" class="icon-up"></image>
					上传图片
				</view>
				<view class="img-item" v-for="(item,index) in imgBox.imgs" :key="index">
					<u-icon name="close-circle-fill" size="20" class="close" @click="delFun('imgs',index,'more')"></u-icon>
					<view class="img-main">
						<image :src="imgFilter(item)" mode="widthFix" class="image"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="white-bg">
			<view class="flex-box item-title">
				门头照片
				<text class="title-tips">（每张图片大小不可超过4M,最多上传4张） </text>
			</view>
			<view class="img-box flex-box">
				<view class="upload" v-if="imgBox.thumb.length<4" @click="chooseImage('thumb','more')">
					<image src="@/static/img/up-img.png" class="icon-up"></image>
					上传图片
				</view>
				<view class="img-item" v-for="(item,index) in imgBox.thumb" :key="index">
					<u-icon name="close-circle-fill" size="20" class="close" @click="delFun('thumb',index,'more')"></u-icon>
					<view class="img-main">
						<image :src="imgFilter(item)" mode="widthFix" class="image"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="white-bg">
			<view class="flex-box item-title">
				营业执照
				<text class="title-tips">（图片大小不可超过4M） </text>
			</view>
			<view class="img-box flex-box">
				<view class="upload" v-if="!imgBox.business_license" @click="chooseImage('business_license')">
					<image src="@/static/img/up-img.png" class="icon-up"></image>
					上传图片
				</view>
				<view class="img-item" v-if="imgBox.business_license">
					<u-icon name="close-circle-fill" size="20" class="close" @click="delFun('business_license')"></u-icon>
					<view class="img-main">
						<image :src="imgFilter(imgBox.business_license)" mode="widthFix" class="image"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="white-bg">
			<view class="flex-box item-title">
				经营许可证
				<text class="title-tips">（图片大小不可超过4M） </text>
			</view>
			<view class="img-box flex-box">
				<view class="upload" v-if="!imgBox.licence" @click="chooseImage('licence')">
					<image src="@/static/img/up-img.png" class="icon-up"></image>
					上传图片
				</view>
				<view class="img-item" v-if="imgBox.licence">
					<u-icon name="close-circle-fill" size="20" class="close" @click="delFun('licence')"></u-icon>
					<view class="img-main">
						<image :src="imgFilter(imgBox.licence)" mode="widthFix" class="image"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="white-bg">
			<view class="flex-box item-box">
				<view class="item-text">
					营业时间
				</view>
				<input type="text" v-model="info.business_hours" class="box-1  text-right" placeholder="例如:周一至周五 8:00-20:00">
			</view>
			<view class="flex-box item-box">
				<view class="item-text">
					联系方式(对外展示)
				</view>
				<input type="number" maxlength="11" v-model.number="info.phone" class="box-1  text-right"
					placeholder="请输入联系方式">
			</view>
			<view class="flex-box item-box">
				<view class="item-text">
					负责人手机号
				</view>
				<input type="number" maxlength="11" v-model.number="info.charge_phone" class="box-1 text-right"
					placeholder="请输入负责人手机号">
			</view>
			<view class="flex-box item-box" @click="selectedAddress()">
				<view class="item-text">
					医院地址
				</view>
				<view class="box-1 text-right">{{address.poiaddress || '请选择医院地址'}}</view>
			</view>
		</view>
		<view class="fixed">
			<view class="agreen flex-box">
				<u-checkbox-group>
					<u-checkbox shape="circle" v-model="isAgree" labelSize="24rpx" activeColor="#D02227"
						inactiveColor="#D8D8D8" label="我已阅读并同意" @change="agreeFun"></u-checkbox>
					<text class="sign">《入驻协议》</text>
				</u-checkbox-group>
			</view>
			<view class="btn" @click="submitFun()">
				保存
			</view>
		</view>


	</view>
</template>

<script>
	import request from "@/utils/request";
	export default {
		data() {
			return {
				isAgree: false,
				info: {
					charge_phone: '', //负责人手机号
					phone: '', //医院手机号
					area_id: '110000', //城市id
					address: '', //详细地址
					title: '', //
					business_hours: '', //营业时间
					lng: '', //精度
					lat: '', //纬度
				},
				imgBox:{
					licence:'',//经营许可证
					imgs:[],//医院图片
					business_license:'',//营业执照
					thumb:[],//门头图
				},
				flag:true,
				address:{
					poiaddress:'',
					latlng:{
						lat:'',
						lng:''
					},
				}
			}
		},
		onLoad(){
			uni.$on('mapAddress',(res)=>{
				this.address = res
			})
			this.initData()
		},
		onBackPress(options){
			return true
		},
		methods: {
			initData(){
				this.$u.api.checkLogin()
				.then(res=>{})
				.catch(err =>{})
			},
			imgFilter(val){
			  return (val instanceof File) ? URL.createObjectURL(val):''
			},
			chooseImage(name,type) {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFiles[0];
						const MAX_SIZE = 4 * 1024 * 1024;//4M
						uni.getFileInfo({
						  filePath: res.tempFilePaths[0],
						  success: (infoRes) => {
							if (infoRes.size > MAX_SIZE) {
							 this.$u.toast('图片大于4M，请上传小于4M的图片')
							  return;
							}
							if(type=='more'){
								this.imgBox[name].push(tempFilePaths)
							}else{
								this.imgBox[name] = tempFilePaths
							}
						  }
					  })
					}
				})
			},
			agreeFun() {
				this.isAgree = !this.isAgree
			},
			delFun(name,index,type){
				if(type=='more'){
					this.imgBox[name].splice(index,1)
				}else{
					this.imgBox[name]=''
				}
			},
			submitFun() {
				if(!this.flag) {
					this.$u.toast('请勿重复操作！')
					return
				}
				if (!this.isAgree) {
					this.$u.toast('请先阅读并同意入驻协议')
					return
				}
				if (!this.info.title) {
					this.$u.toast('请输入医院名称')
					return
				}
				if (!this.info.business_hours) {
					this.$u.toast('请输入医院营业时间')
					return
				}
				if (!this.$u.test.mobile(this.info.phone)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.$u.test.mobile(this.info.charge_phone)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.address.poiaddress) {
					this.$u.toast('请选择医院地址')
					return
				}
				let _address = {
					address:this.address.poiaddress,
					lat:this.address.latlng.lat,
					lng:this.address.latlng.lng
				}
				let _data = {...this.info,..._address}
				for(let key in this.imgBox.imgs){
					_data[`imgs[${key}]`] = this.imgBox.imgs[key]
				}
				for(let key in this.imgBox.thumb){
					_data[`thumb[${key}]`] = this.imgBox.thumb[key]
				}
				_data['licence[]'] = this.imgBox.licence??''
				_data['business_license[]'] = this.imgBox.business_license??''
				this.flag = false
				uni.showLoading({
					title:"保存中……"
				})
				request.requestFormData({
				  url:'/store/apply',
				  data:_data,
				}).then((res)=>{
					uni.hideLoading()
					this.flag = true
					this.$u.toast(res.msg)
				})
				.catch(err=>{
					uni.hideLoading()
					this.flag = true
				})

			},
			selectedAddress(){
				let _url = `https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=${this.$c.mapKey}&referer=myapp`
				uni.navigateTo({
					url:`/pages/Station/web-view?url=${encodeURIComponent(JSON.stringify(_url))}`
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}

	.apply {
		padding: 30rpx;
		padding-bottom: 180rpx;

		.white-bg {
			border-radius: 20rpx;
			background: #fff;
			margin-bottom: 30rpx;
			padding: 20rpx 30rpx;
		}

		.agreen {
			justify-content: center;
		}
	}

	.item-title {
		font-size: 30rpx;
		color: #353535;

		.title-tips {
			color: $base;
			font-size: 24rpx;
		}
	}

	.item-box {
		border-radius: 20rpx;
		background: #F6F7FB;
		padding: 20rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #333;

		.item-text {
			font-size: 30rpx;
			font-weight: bolder;
			flex-shrink: 0;
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.text-right {
		text-align: right;
	}

	.img-box {
		margin-top: 30rpx;

		.upload {
			background: #F6F7FB;
			border-radius: 20rpx;
			padding: 30rpx 0;
			text-align: center;
			color: #A8A8A8;
			margin-right: 30rpx;
			flex-shrink: 0;
			min-width: 150rpx;
			font-size: 26rpx;

			.icon-up {
				width: 74rpx;
				height: 56rpx;
				display: block;
				margin: 0 auto 10rpx;
			}
		}

		.img-item {
			margin-right: 20rpx;
			position: relative;
			z-index: 0;

			.img-main {
				width: 140rpx;
				height: 140rpx;
				overflow: hidden;
				border-radius: 20rpx;
			}

			.close {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				z-index: 5;
				background: #fff;
				border-radius: 50%;
			}

			.image {
				width: 100%;
			}
		}
	}

	.fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;

		.btn {
			width: 80%;
			margin: 30rpx auto 0;
			background: $base;
			color: #fff;
			line-height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			border-radius: 40rpx;
		}
	}
</style>